<template>
  <div>
    <h2>Parent - 父组件</h2>
    <h2>price -- {{ price }}</h2>
    <h2>num-- {{ num }}</h2>
    <h2 @click="change(200)">count -- {{ count }}</h2>
    <button @click="changShow">点击显示子组件1</button>
    <button @click="changeOne">ref 修改子组件1</button>

    <hr />
    <child-one :price="price" :show="show" ref="one"></child-one>

    <hr />
    <child-two @changePrice="changeData" :click="change">
      <template #demo>
        <div>
          <h2>希望疫情赶紧过期</h2>
        </div>
      </template>
    </child-two>
  </div>
</template>

<script>
import ChildOne from "./ChildOne.vue";
import ChildTwo from "./ChildTwo.vue";
export default {
  data() {
    return {
      count: 10,
      num: 1000,
      show: true,
      price: 100,
    };
  },
  methods: {
    change(n) {
      this.count += n;
    },
    changShow() {
      this.show = !this.show;
    },
    changeOne() {
      this.$refs.one.word = "认真学习vue";
    },
    changeData(price) {
      this.price += price;
    },
    change(n){
        this.price +=n;
    }
  },
  components: {
    ChildOne,
    ChildTwo,
  },
};
</script>